<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<body>

<script src="/layui/layui.js"></script>
<script type="text/html" class="demoTable" id="myDiv">
    <button class="layui-btn layui-btn-sm" lay-event="marketinsert"><i
            class="layui-icon">&#xe654;</i>新增</button>
    <div class="layui-inline" style="position: relative;left: 30px;">
        <label class="layui-form-label" style="width: 90px">证券编号</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="securityIds" name="securityId" placeholder="证券编号">
        </div>
    </div>
    <div class="layui-inline" style="position: relative;left: 30px;">
        <label class="layui-form-label" style="width: 90px">业务日期</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="inputDate" name="inputDate" placeholder="日期">
        </div>
    </div>
    <div class="layui-inline layui-show-xs-block">
        <button class="layui-btn layui-btn-primary" lay-submit="search" lay-event="search" lay-filter="sreach"><i class="layui-icon">&#xe615;</i>搜索
        </button>
    </div>
</script>
<script>
    layui.use(['table','laydate','layer'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var laydate=layui.laydate;
        var layer = layui.layer;
        table.render({
            elem: '#trackone'
            ,id:'testReload'
            ,totalRow: true
            ,page: true
            ,url:'marketSelect'
            ,toolbar:'#myDiv'
            ,height:"full-20"
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field: 'marketId', title: '行情id', sort: true, fixed: 'left'}
                ,{field: 'securityId', title: '证券编号'}
                ,{field: 'securityName', title: '证券名称'}
                ,{field: 'inputDate', title: '日期'}
                ,{field: 'openMoney', title: '开盘价格'}
                ,{field: 'endMoney', title: '收盘价格'}
                ,{field: 'marketBeiZhu', title: '备注'}
                ,{fixed: 'right', title:'操作' ,align:'center', toolbar: '#barDemo'}
            ]]
        });
        table.on('toolbar(trackone)',function (obj) {
            var securityId=$("#securityIds").val();
            var inputDate=$("#inputDate").val();
            if (obj.event=='search'){
                alert($('#roleId').val());
                table.reload('trackone',{
                    url:'marketSelects'
                    ,where: {
                        'securityId': securityId,
                        'inputDate': inputDate,
                    }
                    ,page:{
                        curr:1
                    }
                });
                $("#securityIds").val(securityId);
                $("#inputDate").val(inputDate);
            }else if (obj.event=='marketinsert'){
                var marketinsert=layer.open({
                    area:['1000px','550px'],
                    type: 1,
                    title: '添加用户信息',
                    closeBtn: 1,
                    move:false,
                    content:$("#add")
                });
            }
        });
        table.on('tool(trackone)',function (obj) {
            var data = obj.data;
            if (obj.event=='marketdelete'){
                layer.confirm('您确定要删除吗', function (index) {
                    layer.close(index);
                    $.getJSON(
                        'marketdelete'
                        ,'marketId='+data.marketId
                        ,function (msg) {
                            if(msg==1){
                                alert("删除成功");
                                table.reload('testReload')
                            }else {
                                alert("删除失败");
                                table.reload('testReload')
                            }
                            parent.location.reload();
                        });
                })

            }else if (obj.event=='marketupdate'){
                var bookObj=$.parseJSON(JSON.stringify(data));
                form.val("upform",bookObj);
                var index=layer.open({
                    area:['1000px','550px'],
                    type: 1,
                    title: '修改用户信息',
                    closeBtn: 1,
                    move:false,
                    content:$("#up")
                });
            }

        })

        form.on('submit(addsubmit)',function () {
            // alert("新增表单提交");
            var formData= form.val("addform");
            $.get('marketinsert',formData,
                function(msg) {
                    table.reload('testReload')
                    alert(msg)
                });
        });
        form.on('submit(upsubmit)',function () {
            // alert("修改表单提交");
            var formData= form.val("upform");
            $.get('marketupdate',formData,
                function(msg) {
                    table.reload('testReload')
                    alert(msg)
                });
        });
        laydate.render({
            elem: '#dates',
            //解决窗口闪退
            trigger:'click',
        });
        laydate.render({
            elem: '#datess',
            //解决窗口闪退
            trigger:'click',
        });
        laydate.render({
            elem: '#inputDate',
            //解决窗口闪退
            trigger:'click',
        });
    });

    layui.use(['tableSelect'],function (){
        //加载用到layui组件
        var form = layui.form;
        var $=layui.$;
        var tableSelect = layui.tableSelect;
        //下拉表格 的渲染
        tableSelect.render({
            elem: '#securityNameid',//渲染表格 与 文本框绑定
            searchKey:'securityName',//后端根据这个名称得到下拉表格中文本框的值
            table: {
                url: 'select',//数据接口
                cols: [[
                    {type: 'radio'},
                    {field:'securityId',title: '证券编号'}
                    ,{field:'securityName',title: '证券名称'}
                    ,{field:'releaseDate',title: '发行日期'}
                ]]
            },
            //回调函数
            done: function (elem, data) {
                var Name='';
                //遍历选中的数据
                $.each(data.data,function (index,item) {
                    Name=item.securityName;
                    $("#securityNameid").val(item.securityName);
                    $("#securityId").val(item.securityId);
                });
                elem.val(Name);//给输入框里显示的值赋值
            }
        })
    })

    layui.use(['tableSelect'],function (){
        //加载用到layui组件
        var form = layui.form;
        var $=layui.$;
        var tableSelect = layui.tableSelect;
        //下拉表格 的渲染
        tableSelect.render({
            elem: '#securityIdid',//渲染表格 与 文本框绑定
            searchKey:'securityId',//后端根据这个名称得到下拉表格中文本框的值
            table: {
                url: 'select',//数据接口
                cols: [[
                    {type: 'radio'},
                    {field:'securityId',title: '证券编号'}
                    ,{field:'securityName',title: '证券名称'}
                    ,{field:'releaseDate',title: '发行日期'}
                ]]
            },
            //回调函数
            done: function (elem, data) {
                var Name='';
                //遍历选中的数据
                $.each(data.data,function (index,item) {
                    Name=item.securityId;
                    $("#securityIdid").val(item.securityId);
                    $("#securityIds").val(item.securityId);
                });
                elem.val(Name);//给输入框里显示的值赋值
            }
        })
    })
</script>
<table id="trackone" lay-filter="trackone"></table>

<div id="add"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="addform" lay-filter="addform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;width: 100%">
        <div style="Float: left; width: 40%; margin-left: 10%">
<!--            <div class="layui-form-item" style="text-align: center;">-->
<!--            <label class="layui-form-label">行情id</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="marketId" lay-verify="required"-->
<!--                       autocomplete="off" placeholder="请输入行情id" class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--            <div class="layui-form-item" style="text-align: center;">-->
<!--                <label class="layui-form-label">基金编号</label>-->
<!--                <div class="layui-input-inline">-->
<!--                    <input type="text" name="fundId" lay-verify="required"-->
<!--                           autocomplete="off" placeholder="请输入基金编号" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">证券名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="securityName" lay-verify="required" id="securityNameid"
                           autocomplete="off" placeholder="请选择证券名称" class="layui-input">
                    <input type="hidden" id="securityId" name="securityId">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="inputDate" class="layui-input" id="dates" placeholder="日期" >
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">开盘价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="openMoney" lay-verify="required"
                           autocomplete="off" placeholder="请输入开盘价格" class="layui-input">
                </div>
            </div>
        </div>
        <div style="Float: left; width: 40%; margin-left: 10%">

            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">收盘价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="endMoney" lay-verify="required"
                           autocomplete="off" placeholder="请输入收盘价格" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="marketBeiZhu" lay-verify="required"
                           autocomplete="off" placeholder="备注" class="layui-input">
                </div>
            </div>

        </div>
        <!--        <div class="layui-form-item" style="text-align: center;">-->
        <!--            <label class="layui-form-label">业务状态</label>-->
        <!--            <div class="layui-input-inline">-->
        <!--                <input type="text" name="businessStatu" lay-verify="required"-->
        <!--                       autocomplete="off" placeholder="请输入业务状态" class="layui-input">-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="layui-form-item" style="text-align: center;">-->
        <!--            <label class="layui-form-label">业务类型</label>-->
        <!--            <div class="layui-input-inline">-->
        <!--                <input type="text" name="businessType" lay-verify="required"-->
        <!--                       autocomplete="off" placeholder="请输入业务类型" class="layui-input">-->
        <!--            </div>-->
        <!--        </div>-->


        <div style="position: absolute; bottom: 200px; left: 31.5%;">
            <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
                <i class="layui-icon">&#x1005;</i>添加
            </button>
        </div>
        <div style="position: absolute; bottom: 200px; left: 60%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<div id="up"
     style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="upform" lay-filter="upform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;width: 100%">
        <div style="Float: left; width: 40%; margin-left: 10%">
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">行情id</label>
                <div class="layui-input-inline">
                    <input type="text" disabled="disabled" name="marketId" lay-verify="required"
                           autocomplete="off" placeholder="请输入行情id" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">基金编号</label>
                <div class="layui-input-inline">
                    <input type="text" disabled="disabled" name="fundId" lay-verify="required"
                           autocomplete="off" placeholder="请输入基金编号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">证券编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="securityId" lay-verify="required" id="securityIdid"
                           autocomplete="off" placeholder="请输入证券编号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="inputDate" class="layui-input" id="datess" placeholder="日期" >
                </div>
            </div>
        </div>
        <div style="Float: left; width: 40%; margin-left: 10%">
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">开盘价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="openMoney" lay-verify="required"
                           autocomplete="off" placeholder="请输入开盘价格" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">收盘价格</label>
                <div class="layui-input-inline">
                    <input type="text" name="endMoney" lay-verify="required"
                           autocomplete="off" placeholder="请输入收盘价格" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center;">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <input type="text" name="marketBeiZhu" lay-verify="required"
                           autocomplete="off" placeholder="备注" class="layui-input">
                </div>
            </div>
        </div>


        <div style="position: absolute; bottom: 200px; left: 31.5%;">
            <button class="layui-btn" lay-submit="" lay-filter="upsubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
        </div>
        <div style="position: absolute; bottom: 200px; left: 60%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
    </form>
</div>
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="marketupdate"><i
            class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="marketdelete"><i
            class="layui-icon">&#xe640;</i>删除</a>
</div>

</body>
</html>